<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>实现慕慕手记多文章平铺</title>
		<style>
			.inner{
				/* border: 1px solid red; */
				width: 1030px;
				margin: 0 auto;
			}
			.left,
			.right{
				/* display: inline-block; */
				float: left;
			}
			img {
				width: 70px;
				border-radius: 10px;
			}
			.right {
				margin-left:15px;
				border-bottom: 1px solid #e8e8e8;
				padding-bottom: 10px;
				width: 900px;
			}
			a {
				font-weight: 700;
				color: black;
				text-decoration: none;
			}
			span {
				font-size: 12px;
				display: inline-block;
				text-align: center;
				height: 30px;
				line-height: 30px;
				margin-right: 10px;
			}
			.zixun {
				color: #545c63;
				width: 50px;
				background: rgba(84,92,99,0.1);
				border-radius: 15px;
				
			}
			.my-font {
				color: #9199a1;
			}
			.xia {
				margin-top: 10px;
			}
			.cb {
				clear: both;
			}
		</style>
	</head>
	<body>
		<!-- 搭建html的骨架 -->
		<div class="warpper">
			<div class="inner">
				<div class="left">
					<img src="1.jpg" alt="">
				</div>
				<div class="right">
					<div class="shang">
						<a href="">慕课手记社区指南</a>
					</div>
					<div class="xia">
						<span class="zixun">资讯</span>
						<span class="my-font">18899</span>
						<span class="my-font">慕课网官方_运营中心</span>
						<span class="my-font">资讯</span>
					</div>
				</div>
			</div>
			<div class="inner cb">
				<div class="left">
					<img src="1.jpg" alt="">
				</div>
				<div class="right">
					<div class="shang">
						<a href="">慕课手记社区指南</a>
					</div>
					<div class="xia">
						<span class="zixun">资讯</span>
						<span class="my-font">18899</span>
						<span class="my-font">慕课网官方_运营中心</span>
						<span class="my-font">资讯</span>
					</div>
				</div>
			</div>
			<div class="inner cb">
				<div class="left">
					<img src="1.jpg" alt="">
				</div>
				<div class="right">
					<div class="shang">
						<a href="">慕课手记社区指南</a>
					</div>
					<div class="xia">
						<span class="zixun">资讯</span>
						<span class="my-font">18899</span>
						<span class="my-font">慕课网官方_运营中心</span>
						<span class="my-font">资讯</span>
					</div>
				</div>
			</div>
			<div class="inner cb">
				<div class="left">
					<img src="1.jpg" alt="">
				</div>
				<div class="right">
					<div class="shang">
						<a href="">慕课手记社区指南</a>
					</div>
					<div class="xia">
						<span class="zixun">资讯</span>
						<span class="my-font">18899</span>
						<span class="my-font">慕课网官方_运营中心</span>
						<span class="my-font">资讯</span>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>